<template>
  <div class="list-page">
    <list-header></list-header>
    <div class="home-menu flex-wrap">
      <div
        class="menu-item"
        v-for="item in menuArr"
        :key="item.name"
        :class="{ 'active-menu': item.name === mouseMenuItem }"
        @mouseenter="mouseMenuItem = item.name"
        @mouseleave="mouseMenuItem = ''"
        @click="returnToPage(item.url)"
      >
        <Icon
          :type="item.type"
          :color="item.name === mouseMenuItem ? '#000' : '#999'"
          size="45"
        />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <device-box></device-box>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import deviceBox from "./Device.vue";
import listHeader from "./ListHeader.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { store } from '@/store/Store';

@Component({
  components: { deviceBox, listHeader }
})
export default class extends Vue {
  menuArrAll = [
        {
            name: '品牌商管理',
            type: 'md-contacts',
            url: '/company',
            resource: Validation.check(Resources.COMPANY)
        },
        {
            name: '后台用户',
            type: 'logo-android',
            url: '/account',
            resource: Validation.check(Resources.ACCOUNT)
        },
        {
            name: '角色权限',
            type: 'ios-copy',
            url: '/role',
            resource: Validation.check(Resources.ROLE)
        },
        {
            name: '订单管理',
            type: 'ios-cart',
            url: '/order',
            resource: Validation.check(Resources.ORDERS_VIEW)
        },
        {
            name: '会员管理',
            type: 'md-chatbubbles',
            url: '/member',
            resource: Validation.check(Resources.MEMBER)
        },
        {
            name: '评价管理',
            type: 'ios-quote',
            url: '/evaluation',
            resource: Validation.check(Resources.EVALUTION)
        },
        {
            name: '产品分类',
            type: 'md-grid',
            url: '/product',
            resource: Validation.check(Resources.DEVICE_SORT)
        },
        {
            name: '设备分类',
            type: 'md-grid',
            url: '/device',
            resource: Validation.check(Resources.DEVICE_SORT)
        },
        {
            name: '设备管理',
            type: 'md-bookmarks',
            url: '/device-manage/devices',
            resource: Validation.check(Resources.DEVICE)
        },
        {
          name: '升级栏目',
          type: 'md-arrow-round-up',
          url: '/apk',
          resource: Validation.check(Resources.VERSION_UPDATE)
        },
        {
            name: '经销商管理员',
            type: 'md-chatbubbles',
            url: '/agents',
            resource: Validation.check(Resources.ACCOUNT)
        },
        {
            name: '经销商管理',
            type: 'md-clipboard',
            url: '/agent',
            resource: Validation.check(Resources.AGENT)
        },
        {
            name: '消息推送',
            type: 'md-checkbox',
            url: '/news',
            resource: Validation.check(Resources.NEWS)
        },
        {
            name: '资讯管理',
            type: 'ios-list-box-outline',
            url: '/info',
            resource: Validation.check(Resources.INFO)
        },
        {
            name: '签到管理',
            type: 'md-calendar',
            url: '/signlog',
            resource: Validation.check(Resources.SIGN_LOG_VIEW)
        },
        {
            name: '资源位管理',
            type: 'md-images',
            url: '/banners/nav/banner',
            resource: Validation.check(Resources.BANNERS)
        },
        {
            name: '标签管理',
            type: 'ios-pricetags-outline',
            url: '/label',
            // resource: Validation.check(Resources.BANNERS)
            resource: Validation.check(Resources.LABEL && Resources.LABEL_SORT)
        },
        {
            name: '抽奖活动管理',
            type: 'md-appstore',
            url: '/activity',
            resource: Validation.check(Resources.LABEL && Resources.LABEL_SORT),
        },
      {
          name: '优惠券管理',
          type: 'md-cash',
          url: '/coupons',
          resource: Validation.check(Resources.LABEL && Resources.LABEL_SORT),
      },
        {
            name: '家庭管理',
            type: 'ios-people',
            url: '/family',
            resource: Validation.check(Resources.AFFILIATE)
        },
        {
            name: '管家服务',
            type: 'md-call',
            url: '/service/nav/maintain',
            resource: Validation.check(Resources.POSTSALE)
        },
        {
            name: '问卷调查',
            type: 'ios-help-circle-outline',
            url: '/questionnaire',
            resource: Validation.check(Resources.QUESTIONNAIRE_VIEW)
        }
    ];
  menuArrAllAgent = [
        {
            name: '品牌商管理',
            type: 'md-contacts',
            url: '/company',
            resource: Validation.check(Resources.COMPANY)
        },
        {
            name: '后台用户',
            type: 'logo-android',
            url: '/account',
            resource: Validation.check(Resources.ACCOUNT)
        },
        {
            name: '角色权限',
            type: 'ios-copy',
            url: '/role',
            resource: Validation.check(Resources.ROLE)
        },
        {
            name: '订单管理',
            type: 'ios-cart',
            url: '/order',
            resource: Validation.check(Resources.ORDERS_VIEW)
        },
        {
            name: '会员管理',
            type: 'md-chatbubbles',
            url: '/member',
            resource: Validation.check(Resources.MEMBER)
        },
        {
            name: '评价管理',
            type: 'md-chatbubbles',
            url: '/evaluation',
            resource: Validation.check(Resources.EVALUTION)
        },
        {
            name: '产品分类',
            type: 'md-grid',
            url: '/product',
            resource: Validation.check(Resources.DEVICE_SORT)
        },
        {
            name: '设备分类',
            type: 'md-grid',
            url: '/device',
            resource: Validation.check(Resources.DEVICE_SORT)
        },
        {
            name: '设备管理',
            type: 'md-bookmarks',
            url: '/device-manage/devices',
            resource: Validation.check(Resources.DEVICE)
        },
        {
            name: '经销商管理员',
            type: 'md-chatbubbles',
            url: '/agents',
            resource: Validation.check(Resources.ACCOUNT)
        },
        {
            name: '经销商管理',
            type: 'md-clipboard',
            url: '/agent',
            resource: Validation.check(Resources.AGENT)
        },
        {
            name: '消息推送',
            type: 'md-checkbox',
            url: '/news',
            resource: Validation.check(Resources.NEWS)
        },
        {
            name: '资讯管理',
            type: 'ios-list-box-outline',
            url: '/info',
            resource: Validation.check(Resources.INFO)
        },
        {
            name: '签到管理',
            type: 'md-calendar',
            url: '/signlog',
            resource: Validation.check(Resources.SIGN_LOG_VIEW)
        },
        {
            name: '资源位管理',
            type: 'md-images',
            url: '/banners/nav/banner',
            resource: Validation.check(Resources.BANNERS)
        },
        {
            name: '标签管理',
            type: 'ios-pricetags-outline',
            url: '/label',
            // resource: Validation.check(Resources.BANNERS)
            resource: Validation.check(Resources.LABEL && Resources.LABEL_SORT)
        },
        {
          name: "抽奖活动管理",
          type: "md-appstore",
          url: "/activity",
          resource: Validation.check(Resources.ACTIVITY),
        },
        {
            name: "优惠券管理",
            type: "md-cash",
            url: "/coupons",
            resource: Validation.check(Resources.ACTIVITY),
        },
        {
            name: '家庭管理',
            type: 'ios-people',
            url: '/family',
            resource: Validation.check(Resources.AFFILIATE)
        },
        {
            name: '管家服务',
            type: 'md-call',
            url: '/service/nav/maintain',
            resource: Validation.check(Resources.POSTSALE)
        },
        {
            name: '问卷调查',
            type: 'ios-help-circle-outline',
            url: '/questionnaire',
            // resource: Validation.check(Resources.BANNERS)
            resource: Validation.check(Resources.QUESTIONNAIRE_VIEW)
        },
    ];

  mouseMenuItem = '';

  get menuArr() {
      if (store.state.user.tepee === '1') {
          return this.menuArrAll.filter((x) => x.resource);
      } else {
          return this.menuArrAllAgent.filter((x) => x.resource);
      }
  }

  returnToPage(url: string) {
    this.$router.push({ path: url });
  }
}
</script>

<style lang="less" scoped>
.home-menu {
  .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 13%;
    height: 120px;
    border: 1px solid #e4e4e4;
    background: #fcfcfc;
    margin: 18px 60px 0 0;
    color: #999;

    span {
      padding-top: 5px;
    }
  }
}

.active-menu {
  color: #000 !important;
  border: 1px solid #000000 !important;
  cursor: pointer;
  transition: all 0.5s;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
</style>
